Tlin Blog > HTML+CSS基础（三）

HTML+CSS基础（三）

2019-03-05

html css

一、px、em、rem的区别

  • 1、px:
  • px就是像素pixel，相对于显示器屏幕分辨率而言的，用px设置字体大小时，比较稳定和精确，设置多少就是多少。但是px不支持用户进行浏览器缩放或不同移动端的兼容，因为像素是固定的，屏幕大小是变化的，所以引入了em和rem。
  • 特点：
  • ①、IE无法调整那些使用px作为单位的字体大小；
  • ②、国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
  • ③、Firefox能够调整px和em，rem，但是目前国内使用IE浏览器(或内核)的用户占比重较大。
  • 2、em:
  • ①、浏览器的默认字体都是16px，那么1em=16px，以此类推计算12px=0.75em，10px=0.625em，2em=32px；
  • ②、这样使用很复杂，很难很好的与px进行对应,也导致书写、使用、视觉的复杂(0.75em、0.625em全是小数点)；
  • ③、为了简化font-size的换算，我们在body中写入一下代码
  • body {font-size: 62.5%; } /* 公式16px*62.5%=10px */
  • 这样页面中1em=10px,1.2em=12px,1.4em=14px,1.6em=16px，使得视觉、使用、书写都得到了极大的帮助。
  • em的特点：
  • ①、em的值并不是固定的；
  • ②、em会继承父级元素的字体大小。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!--主要代码：-->
    <style>
        body{font-size: 62.5%;}
        div{border:1px solid gray;font-size: 1.4em;}
    </style>
    <div class="out">
        最外框
        <div class="center">
            中间框
            <div class="in">最小框</div>
        </div>
    </div>

  • 为什么会这样？
  • 这主要是由于em的特性导致的。em中所有的字体都是相对于父元素的大小决定的；如果父级元素设置了font-size:1.4em，它的子元素也设置了font-size:1.4em那么最后计算的结果是1.4X1.4=1.96em，其它的依此类推。
  • 因此，rem就是为了解决这些问题而出现的。
  • 3、rem:
  • 特点：
  • ①、rem单位可谓集相对大小和绝对大小的优点于一身
  • ②、和em不同的是rem总是相对于根元素(如:root{})，而不像em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单。

  • ③、rem支持IE9及以上，意思是相对于根元素html（网页），不会像em那样，依赖于父元素的字体大小，而造成混乱，使用起来也好了很多。

  • 跟em一样，网页默认1rem=16px，为了简化font-size的换算，我们在根元素html中加入font-size: 62.5%;

  • 即：1rem=10px,1.2rem=12px,1.4rem=14px,1.6rem=16px……
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--主要代码：-->
<style>
    html{font-size: 62.5%;}
    .out{font-size: 1.6rem;}
    .center{font-size: 1.2rem;}
    .in{font-size: 1.8rem;}
</style>
<div class="out">
    最外框
    <div class="center">
        中间框
        <div class="in">最小框</div>
    </div>
</div>

  • 注意：
  • ①：值得注意的浏览器支持问题： IE8，Safari 4或 iOS 3.2中不支持rem单位。
  • ②：如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用，如 font-size:14px;font-size:1.4rem;
  • ③：如果浏览器都支持，若项使用rem建议把rem的放在后面，因为css样式同级且冲突情况下以最后一个为准。

    二、displasy:none、visibility:hidden、opacity:0 的区别

  • 相同点：
  • 1、都是从视觉上消失；

  • 2、都会对子元素产生影响。

  • 不同点：

  • 1、displasy:none
  • ①：不在文档流中占位，不占据空间，浏览器不解析该元素，但切换为display:block会产生回流、重排；

  • ②：子元素不会被继承，但会影响所有的子元素。

  • 2、visibility:hidden

  • ①：仍占据空间，在文档流中仍旧存在；
  • ②：会被子元素继承，但可以通过控制子元素来显示（visibility:visible;）、隐藏；
  • ③：动态修改此属性会引起重绘；

  • ④：不会触发该元素已经绑定的事件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!--例子：-->
    <style>
        .out{width: 300px;height: 300px;background: blue;display: flex;align-items: center;justify-content: center;visibility: hidden;}
        .in{width: 150px;height: 150px;background: red;visibility: visible;}
    </style>
    <div class="out">
        <div class="in"></div>
    </div>
    <script>
    	document.getElementsByClassName('out')[0].onclick=()=>{alert(1)}
    </script>

  • 这样会出现一个奇怪的现象：

  • 明明父级元素已被隐藏了，但是点击子元素还是会被触发！来看一下浏览器的解析结果：

  • 在js中虽然子元素能够继承了父元素的点击事件，但是父元素已被隐藏了，按理说是不能触发事件，但在此处，visibility:hidden只是从视觉上消失了，但在文档流中是仍然存在的，因此可以通过子元素触发父元素的事件。

  • 3、opacity:0

  • ①：只是透明度为100%,元素隐藏，从视觉上消失，但依然占据空间；
  • ②：会被子元素继承,但是子元素并不能通过opacity=1，进行显示、隐藏；
  • ③：依然能触发已经绑定的事件。